@import 'variables';
.global-modal {
  color: blue;
  display:block;
  position:fixed;
  top:calc(15% - 33px);
  left:calc(15% - 33px);
  right:calc(15% - 33px);
  bottom:calc(15% - 33px);
  z-index:899900;
  animation: fadein 0.15s ease ;
  @keyframes fadein{
      0% { opacity:0;}
      100% { opacity:1;}
  }
  .close-button {
    position:fixed;
    text-align: right;
    color:black;
    border:0;
    font-size: 1em;
    background:transparent;
    top:4%;
    left:7%;
    cursor:pointer;
    img{
      width:calc(0.8vw + 20px);
    }
  }

  .global-modal-bg {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #bac5fa;
    z-index:899901;
    opacity: 0.9;
  }

  .yellow{
    background: $yellow;
  }
  .purple{
    background: $purple;
  }

  .modal-header {
    height: 10%;
    display:block;
    font-weight: 500;
    font-size: 1.1em;
    max-width: 350px;
    font-family: $helvetica-condensed;
    font-stretch:condensed;
    .triangle-isosceles {
      margin-left: 5px;
      position:relative;
      padding:10px 3px;
      color:white;
      background:#6091fb;
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
    }

    .triangle-isosceles:after {
    content:"";
    position:absolute;
    bottom:-0.5em;
    left:5%; /* controls horizontal position */
    border-width:.75em .75em 0;
    border-style:solid;
    border-color:#6091fb transparent;
    display:block;
    width:0;
    }
  }

  .modal-body {
    height:80%;
    display:block;
    overflow: hidden;
    p {
      text-align: left;
      color: black;
    }
    .sloan-bar {
      width:15%;
      float:left;
      height: 100%;
      .sloan-img {
        width:100%;
      }
    }
    .body-message {
      height:100%;
      width:80%;
      padding-left: calc(3% + 2px);
      max-width: 730px;
      float:left;
      font-size: calc(0.8em + 6px);
    }
    
    .tags-slide {
      height: 100%;
    }

    .tags-col-container {
      overflow-x: hidden;
      overflow-y: auto;
      text-align:left;
      font-size: calc(0.77em + 6px);
      @media screen and (min-width: 900px) {
        height: 36vh;
        font-size: 27px;
      }
      @media screen and (max-width: 768px) {
        height: 30vh;
      }
    }

    .onboarding-tag-container {
      background:$black;
      color:white;
      display:inline-block;
      font-family: "Lucida Console", Monaco, monospace, sans-serif;
      position:relative;
      opacity:0.8;
      width: 44%;
      margin-right: 3%;
      border-radius: 50px;
      margin-top: calc(0.2vw + 3px);
      font-size: .75em;
      border: 6px solid white;
      @media screen and (max-width: 900px) {
        width: 92%;
        margin-right: 0%;
        font-size: .7em;
      }
      &:hover{
        opacity:92;
      }
      &.followed-tag{
        opacity:1;
        border: 6px solid $green;
        box-shadow: 2px 2px 0px $green;
        a.onboarding-tag-link-follow{
          background: $green;
          color: white;
        }
      }
      a.onboarding-tag-link{ 
        color:white;
        padding:7px 14px;
        display:inline-block;
        width:100%;
        @media screen and (max-width: 900px) {
          text-align: left;
        }

      }
      a.onboarding-tag-link-follow {
        position:absolute;
        right:9px;
        top: calc(0.7vw - 1px);
        width:30px;
        height:30px;
        text-align:center;
        color:white;
        border-radius:100px;
        font-weight:900;
        line-height:26px;
        font-size:1.1em;
        @media screen and (min-width: 900px) {
          top: 6px;
        }
        &.following-butt {
          font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          top:8px;
          right:6px;
          border: 2px solid white;
          color:white;
          line-height:33px;
        }
      }
    }

  }

  .onboarding-user-container{
    margin-top: calc(0.5vw + 8px);
    text-align: left;
    .onboarding-user-cta{
      font-size: 0.9em;
      color: $black;
      margin: 20px auto 25px;
    }
    .onboarding-article-container{
      color: $black;
      .onboarding-article-header{
        padding: 5px 10px 5px 5px;
        background: $purple;
        font-size: 1.1em;
        font-weight: bold;
        border: 1px solid darken($purple, 20%);
        box-shadow: 4px 5px 0px darken($purple, 20%);
      }
      .onboarding-article-header-checkbox{
        width: 80%;
        display: inline-block;
        text-align: center;
        .onboarding-article-save-all-btn{
          border: 2px solid transparent;
          border-radius: 3px;
          text-align: center;
          float: right;
          font-size: 0.75em;
          background: inherit;
          color: $black;
          &:hover {
            background: darken($purple, 10%);
          }
          &.saved {
            background: darken($purple, 26%);
            color: $white;
              &:hover {
                background: darken($purple, 30%);
              }
          }
        }
      }
    }
    .onboarding-user-list{
      color: $black;
      font-size: 0.7em;
      border: 1px solid darken($purple, 20%);
      box-shadow: 4px 5px 0px darken($purple, 20%);
      .onboarding-user-list-body{
        height: calc(39vh - 20px);
        overflow-y: scroll;
        .onboarding-user-loading {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 15%;
          color: $medium-gray;
        }
      }
      .onboarding-user-list-row{
        padding: 10px 0px;
        img{
          height: 33px;
          width: 33px;
          border-radius: 50%;
          display: inline-block;
          vertical-align: -0.5em;
          margin-right: 10px;
        }
        .onboarding-article-engagement {
          font-size: 16px;
          font-weight: bold;
          font-family: $helvetica-condensed;
          color: $medium-gray;
          img {
            height: 20px;
            min-width: 27px;
            width: initial;
            vertical-align: -5px;
            margin-right: 3px;
            border-radius: initial;
            padding-left: 7px;
          }
        }
        &:nth-child(odd){
          background: $light-gray;
        }
        &.onboarding-user-list-header{
          background: $purple;
          font-size:1.1em;
          font-weight: bold;
        }
        .onboarding-user-list-key{
          width: calc(100% - 80px);
          display: inline-block;
          padding-left: 10px;
          h3 {
            -webkit-margin-before: 0.2em;
            -webkit-margin-after: 0.3em;
            font-size: 30px;
          }
          &.article {
            width: calc(100% - 100px);
            span {
              // article author's name
              color: $medium-gray;
            }
            p {
              // article description
              -webkit-margin-before: 0.5em;
              -webkit-margin-start: 10px;
              font-size: 0.85em;
            }
          }
        }
        .onboarding-user-list-checkbox{
          width: 70px;
          display: inline-block;
          text-align: center;
          button{
            border: 0px;
            border-radius: 3px;
            background: transparent;
            font-size:1.1em;
            &.checked{
              background: $green;
              color: white;
              &:hover {
              background: darken($green, 10%);
              }
              &:active {
                background: darken($green, 20%);
              }
            }
            &:hover {
              background: darken($purple, 10%);
            }
            &:active {
              background: darken($purple, 20%);
            }
            &.article{
              &:hover{
                background: darken($purple, 10%);
              }
              &:active {
                background: darken($purple, 20%);
              }
              &.save-single{
                background: darken($purple, 2%);
                font-size: 0.8em;
                font-family: $helvetica-condensed;
                width: inherit;
                height: 35px;
                &:hover {
                  background: darken($purple, 10%);
                }
                &:active {
                background: darken($purple, 20%);
                }
              }
            &.saved {
              background: darken($purple, 26%);
              color: white;
              &:hover {
                background: darken($purple, 35%);
              }
              &:active {
                background: darken($purple, 50%);
              }
            }
            }
          }
        }
      }
    }
  }

  .modal-footer {
    height:10%;
    display:block;
    .modal-footer-left {
      float: left;
      text-align: left;
      width: 50%;
      height: 100%;
    }

    .modal-footer-right {
      float: left;
      width:50%;
      height:100%;
      text-align: right;
    }

    .button {
      border: 3px solid $black;
      border-radius: 3px;
      text-align: center;
      margin: 1% auto 0;
      cursor: pointer;
      display: inline-block;
      font-size: calc(1vw + 20px);
      padding: 4px 10px;
      a {
        color: black;
      }
      &:hover {
        background: darken($green, 20%);
      }
      &:active {
        background: darken($green, 35%);
      }
    }
  }

  .global-modal-inner {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    position:fixed;
    top:calc(14% - 33px);
    left:calc(15% - 33px);
    right:calc(15% - 33px);
    bottom:calc(14% - 33px);
    background:white;
    z-index:899902;
    text-align:center;
    font-size:calc(1.1vw + 15px);
    box-shadow:0px 0px 100px 1px rgba(0,0,0,0.3);
    border-radius:5px;
    padding:calc(1.2vw + 6px);
    h1{
      font-size:1.4em;
      font-weight:400;
    }
    @media screen and (min-width: 900px) {
      top:calc(13% - 33px);
      bottom:calc(13% - 33px);
    }
  }

}
